$(function () {
    var liNum = 5 * 5 * 5;//li的个数

    init();

    function init() {
        for (var i = 0; i < liNum; i++) {
            var $li = $('<li></li>');
            var x = (Math.random() - 0.5) * 4000;
            var y = (Math.random() - 0.5) * 4000;
            var z = (Math.random() - 0.5) * 4000;

            $li.css({ 'transform': `translate3d(${x}px,${y}px,${z}px)` })

            $('#main').append($li)
        }
        setTimeout(function () {
            Table()
        }, 300)

        $('#styleBtn li').each(function () {
            $(this).click(function () {
                var index = $(this).index()
                switch (index) {
                    case 0:
                            Table();
                        break;
                    case 1:
                        Sphere()
                        break;
                    case 2:
                        Helix()
                        break;
                    case 3:
                        Grid()
                        break;
                    case 4:
                        Screw()
                        break;
                }
            })
        })
    }

    function Grid() {
        var tX = 400, tY = 400, tZ = 800;//水平间隔,垂直间隔
        var firstX = -2 * tX;//第一个li水平位移量
        var firstY = -2 * tY;//第一个li垂直位移量
        var firstZ = -2 * tZ;//第一个li z轴位移量

        $('#main li').each(function (i) {

            var iX = (i % 25) % 5;
            var iY = Math.floor((i % 25) / 5);
            var iZ = Math.floor(i / 25);
            $(this).css({
                'transform': `translate3d(${firstX + iX * tX}px,${firstY + iY * tY}px,${firstZ + iZ * tZ}px)`
            })
        });
    }

    function Helix() {
        //z轴位移,y轴位移,y轴旋转
        var roy = 10, ty = 10;
        var mindLi = Math.floor($('#main li').length / 2);//最中间元素
        var firsttY = -10 * mindLi;//第一个元素
        $('#main li').each(function (i) {
            $(this).css({
                'transform': `rotateY(${i * roy}deg) translateY(${firsttY + ty * i}px) translateZ(1000px)`
            })
        })
    }

    function Sphere() {

        var arr = [1, 4, 7, 11, 14, 17, 21, 17, 14, 11, 7, 4, 1];

        var roX = 180 / arr.length;
        var fisrtRoX = 90;

        $("#main li").each(function (j) {
            $(this).html("JS")
            var sum = 0;
            var index, num
            for (let i = 0; i < arr.length; i++) {
                sum += arr[i];
                if (sum >= j + 1) {
                    index = i;
                    num = arr[i] - (sum - j);
                    break
                }
            }

            var roY = 360 / arr[index];
            var x = index % 2 ? fisrtRoX + index * roX : fisrtRoX - index * roX;
            var y = num * roY;
            var z = x > 90 && x < 270 ? 180 : 0;
            $(this).css({
                transform: 'rotateY(' + y + 'deg) rotateX(' + x + 'deg) rotateZ(' + z + 'deg) translateZ(1000px)'
            });
        })

    }

    function Screw() {
        //z轴位移,y轴位移,y轴旋转
        var roy = 20, ty = 80;
        var mindLi = Math.ceil($('#main li').length / 2);//最中间元素
        var firsttY = -ty * Math.ceil(mindLi / 2);//第一个元素
        console.log(firsttY);

        $('#main li').each(function (i) {
            var x = i >= mindLi ? 180 : 0;
            $(this).css({
                'transform': `rotateY(${((i % mindLi) * roy) + x}deg) translateY(${firsttY + ty * (i % mindLi)}px) translateZ(400px)`
            })
        })
    }

    function Table(){
        var tX = 150,tY=200;

        var firstX=-9*tX + 60
        var firstY= -4*tY

        var arr = [
			{x:firstX,y:firstY},
			{x:firstX+17*tX,y:firstY},
			{x:firstX , y:firstY+tY },
			{x:firstX+tX , y:firstY+tY},
			{x:firstX+12*tX , y:firstY+tY },
			{x:firstX+13*tX , y:firstY+tY },
			{x:firstX+14*tX , y:firstY+tY },
			{x:firstX+15*tX , y:firstY+tY },
			{x:firstX+16*tX , y:firstY+tY },
			{x:firstX+17*tX , y:firstY+tY },
			{x:firstX , y:firstY+tY*2 },
			{x:firstX+tX , y:firstY+tY*2},
			{x:firstX+12*tX , y:firstY+tY*2 },
			{x:firstX+13*tX , y:firstY+tY*2 },
			{x:firstX+14*tX , y:firstY+tY*2 },
			{x:firstX+15*tX , y:firstY+tY*2 },
			{x:firstX+16*tX , y:firstY+tY*2 },
			{x:firstX+17*tX , y:firstY+tY*2 }
		];
        
        $("#main li").each(function(i) {
            var x ,y;
            if (i<18) {
                x = arr[i].x;
                y = arr[i].y;
            }else{
                var iX =  (i+18)%18;
                var iY =  parseInt((i+18)/18) + 1;
                x = firstX + iX*tX
                y = firstY +iY*tY
            }
           
            
            $(this).css({
                'transform':`translateX(${x}px) translateY(${y}px)`
            })
        })
    }

    //拖拽和滚轮动画
    (function () {
        var nowX, lastX, minusX = 0, nowY, lastY, minusY = 0;
        var rotX = 0, rotY = 0, tZ = -2000;
        var timer1, timer2;
        $(document).mousedown(function (ev) {

            ev = ev || window.event;
            lastX = ev.clientX;
            lastY = ev.clientY;
            clearInterval(timer1);
            $(this).on('mousemove', function (ev) {
                ev = ev || window.event;
                nowX = ev.clientX;
                nowY = ev.clientY;

                minusX = nowX - lastX;
                minusY = nowY - lastY;

                rotY += minusX * 0.2
                rotX += minusY * 0.2

                $("#main").css({
                    'transform': `translateZ(${tZ}px)  rotateX(${-rotX}deg) rotateY(${rotY}deg)`
                })

                lastX = nowX;
                lastY = nowY;

            })
        }).mouseup(function () {
            $(this).off('mousemove');
            timer1 = setInterval(function () {
                minusX *= 0.95
                minusY *= 0.95

                if (Math.abs(minusX) < 0.5 && Math.abs(minusY) < 0.5) {
                    clearInterval(timer1);
                }

                rotY += minusX * 0.2
                rotX += minusY * 0.2
                $("#main").css({
                    'transform': `translateZ(${tZ}px)  rotateX(${-rotX}deg) rotateY(${rotY}deg)`
                })
            }, 13);
        }).mousewheel(function () {//滚轮事件
            var d = arguments[1];
            tZ += d * 100;
            tZ = Math.min(0, tZ);
            tZ = Math.max(-8000, tZ);
            clearInterval(timer2);
            $("#main").css({
                'transform': `translateZ(${tZ}px)  rotateX(${-rotX}deg) rotateY(${rotY}deg)`
            })

            timer2 = setInterval(function () {
                d *= 0.9;
                if (Math.abs(d) < 0.01) {
                    clearInterval(timer2);
                }
                tZ += d * 100;
                tZ = Math.min(0, tZ);
                tZ = Math.max(-8000, tZ);
                $("#main").css({
                    'transform': `translateZ(${tZ}px)  rotateX(${-rotX}deg) rotateY(${rotY}deg)`
                })
            }, 13);

        })
    })()
})